@-background-color: #EEEFF0;
@-header-background: #ffffff;
@-drawer-shadow-color: #90909060;
@-widget-selected-shadow-color: #9a9a9a;
@-widget-selected-border-color: #108b96;

.design {
  position: relative;
  background-color: @-background-color;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 50px;
    background-color: @-header-background;
  }

  .content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;

    .body {
      flex: 1;
      // position: absolute;
      height: 100%;
      overflow: auto;

      .ruler_container {
        position: absolute;
        z-index: 1000;
      }

      #free-layout-canvas {
        position: relative;
        left: 0;
        top: 0;
        transform-origin: left top;

        #drawer {
          position: relative;
          box-shadow: 0 0 6px @-drawer-shadow-color;

          .selected {
            cursor: pointer;
            box-shadow: 0 0 4px @-widget-selected-shadow-color;
            z-index: 99;
          }

          .dragging {
            cursor: move;
            z-index: 2000 !important;
            box-shadow: 0 0 2px @-widget-selected-shadow-color;
          }

          & > * {
            user-select: none;
          }
        }

        .selected_area {
          position: absolute;
          z-index: 1000;
          background: rgba(24,160,251, 0.1);
          border: 1px dashed rgba(24,160,251, 0.8);
        }
      }
    }
  }

  .drag_container {
    position: absolute;
    transform-origin: center;

    .cover {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box;
    }

    .hover{
      &:hover {
        border: 1px solid @-widget-selected-border-color;
      }
    }

    .moving {
      background-color: rgba(100, 172, 255, 0.05);
      z-index: 2000;
    }
  }

  .dragging {
    cursor: move;
    z-index: 2000 !important;
    box-shadow: 0 0 6px @-widget-selected-shadow-color;

    transition: 0.1s left, 0.1s top;
    transition-timing-function: ease;
  }

  .moving {
    transition-duration: 0.2s;
    transition-timing-function: ease;
    z-index: 101;
    box-shadow: 0 0 6px @-widget-selected-shadow-color;
  }

  .size-border-container {
    position: absolute;
    z-index: 1510;
    margin: 0;
    border: 0;

    .border {
      background: @-widget-selected-border-color;
    }
  }

  .size-border-h {
    height: 8px;
    cursor: row-resize;
    .border {
      margin: 3px 0;
      height: 2px;
      width: 100%
    }
  }

  .size-border-v {
    width: 8px;
    cursor: col-resize;
    .border {
      margin: 0 3px;
      width: 2px;
      height: 100%
    }
  }

  .size-border-corn {
    position: absolute;
    z-index: 1520;
    width: 12px;
    height: 12px;

    .quart {
      margin: 2px;
      width: 8px;
      height: 8px;
      background-color: #fff;
      box-sizing: border-box;
      border: solid 1px @-widget-selected-border-color;
      border-radius: 50%;
    }
  }

  .nesw-resize {
    cursor: nesw-resize;
  }

  .nwse-resize {
    cursor: nwse-resize;
  }

  .size-cover {
    position: absolute;
    z-index: 1500;
    cursor: move;
    background: rgba(24,160,251, 0.05);
  }

  .alignment-line{
    position: absolute;
  }

  .operation-bar{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2px;
    box-sizing: border-box;
    z-index: 1900;
    .del-icon{
      font-size: 18px;
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
}
